<template>
  <div class='banner' @click="handleGallaryClick(true)">
    <div class="icon-back" @click.stop='handleBackClick()'>
      <i class="iconfont iconfanhui"></i>
    </div>
    <div>
      <img :src="detailData.bannerImg" alt="" style="width:100%">
      <div class="banner-info">
        <span class="sight-name">{{detailData.sightName}}</span>
        <span class="img-count" v-if="detailData !== undefined && detailData.gallaryImgs.length > 0">{{count}}</span>
      </div>
    </div>
    <Gallary :gallaryImgs='detailData.gallaryImgs' v-if="gallaryShow" @close='handleGallaryClick(false)'/>
  </div>
</template>

<script>
import Gallary from '../../../assets/common/Gallary'

export default {
  name:'Banner',
  data () {
    return {
      gallaryShow: false
    }
  },
  props: {
    detailData: Object
  },
  methods: {
    handleGallaryClick (flag) {
      this.gallaryShow = flag
    },
    handleBackClick () {
      this.$router.push('/')
    }
  },
  computed: {
    count () {
      return this.detailData.gallaryImgs.length
    },
    isShow () {
      return this.detailData !== undefined && this.detailData.gallaryImgs > 0 
    }
  },
  components: {
    Gallary
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position relative
  .icon-back
    position absolute
    left 0.2rem
    top 0.2rem
    width 0.8rem
    height 0.8rem
    border-radius 50%
    background rgba(0,0,0,.4)
    text-align center
    line-height 0.8rem
    i
     display inline-block
     vertical-align top
     color white
  img
    vertical-align top
  .banner-info
    position absolute
    width 100%
    left 0
    bottom 0
    height .6rem
    display flex
    justify-content space-between
    align-items center
    padding: 0 .2rem
    box-sizing border-box
    background linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8) )

    .sight-name
      font-size .32rem
      color white
    .img-count
      padding .05rem .2rem
      font-size .2rem
      color white
      background rgba(255,255,255,.3)
      border-radius .2rem
</style>